<template>
  <div>
    <navTop text="我的跟帖" />
    <div v-if="data.length>0">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        @load="onLoad"
        finished-text="没有更多跟帖"
      >
        <contentFollow v-for="item in data" :key="item.id" :data="item" />
      </van-list>
    </div>
    <van-empty description="没有跟帖" v-else />
  </div>
</template>

<script>
// import navTop from "../../components/navTop";
// import contentFollow from "../../components/contentFollow";
export default {
  components: {
    navTop: () => import("../../components/navTop"),
    contentFollow: () => import("../../components/contentFollow")
  },
  data() {
    return {
      data: [],
      pageIndex: 1,
      pageSize: 10,
      loading: false,
      finished: false
    };
  },
  created() {
    this.$axios({
      url: "/user_comments",
      params: {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }
    }).then(res => {
      this.data = res.data.data;
    });
  },
  methods: {
    follow() {
      this.$axios({
        url: "/user_comments",
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.data = [...this.data, ...res.data.data];
        // this.comment_length = this.dataS.comment_length;
        // console.log(this.data.pageIndex);
        this.loading = false;
        if (res.data.data.length < this.pageSize) {
          this.finished = true;
          // console.log(this.data);
        }
      });
    },
    onLoad() {
      this.pageIndex += 1;
      this.follow();
    }
  }
};
</script>

<style lang="less" scoped>
.more {
  margin: 30px auto;
  text-align: center;
  font-size: 15px;
  color: #ccc;
}
</style>
